<template>
  <div>
    <section class="portfolio-filter section type2">
        <ul class="nav nav-pills">
            <li v-for="(section, index) in sections" :class="{active: isActive === index}" @click="changeClass(index)">
              <a href="#" data-filter=".artwork">{{section.name}}</a>
            </li>
        </ul>
    </section>
    <zones :title="sections[isActive].name"/>
  </div>
</template>

<script>
import zones from './zone'
export default {
  name: "postSection",
  components: {
    zones
  },
  methods: {
    changeClass(index) {
      this.isActive = index;
    }
  },
  data() {
      return {
          isActive: 0,
          sections: [
              {name: "ALL"},
              {name: "生活"},
              {name: "自然"},
              {name: "娱乐"},
              {name: "体育"},
              {name: "工作"},
              {name: "学习"},
              {name: "爱情"},
              {name: "更多"}
          ]
      }
  }
}
</script>